<template>
  <div id="spreed" style="height: 500px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    let spreedDom = document.getElementById('spreed');
    let spreedChart = echarts.init(spreedDom);
    let option;
    option = {
      color: 'rgb(149, 29, 29)',
      title: {
        text: '各个省份书院数目',
        textStyle: {
          color: '#112233',
          fontSize: '16',
        },
      },
      xAxis: {
        data: [
          '华北地区',
          '东北地区',
          '华东地区',
          '华中地区',
          '华南地区',
          '西南地区',
          '西北地区',
        ],
        axisLabel: {
          color: 'rgb(149, 29, 29)',
          fontSize: '14',
        },
      },
      yAxis: {
        type: 'value',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      dataGroupId: '',
      animationDurationUpdate: 500,
      series: {
        type: 'bar',
        id: 'area',
        data: [
          {
            value: 125,
            groupId: '华北地区',
          },
          {
            value: 26,
            groupId: '东北地区',
          },
          {
            value: 559,
            groupId: '华东地区',
          },
          {
            value: 297,
            groupId: '华中地区',
          },
          {
            value: 209,
            groupId: '华南地区',
          },
          {
            value: 241,
            groupId: '西南地区',
          },
          {
            value: 108,
            groupId: '西北地区',
          },
        ],
        universalTransition: {
          enabled: true,
          divideShape: 'clone',
        },
      },
    };

    const drilldownData = [
      {
        dataGroupId: '华北地区',
        data: [
          ['北京市', 12],
          ['天津市', 10],
          ['河北省', 60],
          ['山西省', 40],
          ['内蒙古自治区', 3],
        ],
      },
      {
        dataGroupId: '东北地区',
        data: [
          ['辽宁省', 15],
          ['吉林省', 7],
          ['黑龙江省', 4],
        ],
      },
      {
        dataGroupId: '华东地区',
        data: [
          ['上海市', 16],
          ['江苏省', 63],
          ['浙江省', 118],
          ['安徽省', 68],
          ['福建省', 55],
          ['江西省', 112],
          ['山东省', 94],
          ['台湾省', 33],
        ],
      },
      {
        dataGroupId: '华中地区',
        data: [
          ['河南省', 93],
          ['湖北省', 83],
          ['湖南省', 121],
        ],
      },
      {
        dataGroupId: '华南地区',
        data: [
          ['广东省', 90],
          ['广西壮族自治区', 88],
          ['海南省', 23],
          ['香港特别行政区', 7],
          ['澳门特别行政区', 1],
        ],
      },
      {
        dataGroupId: '西南地区',
        data: [
          ['重庆市', 0],
          ['四川省', 107],
          ['贵州省', 70],
          ['云南省', 64],
          ['西藏自治区', 0],
        ],
      },
      {
        dataGroupId: '西北地区',
        data: [
          ['陕西省', 56],
          ['甘肃省', 34],
          ['青海省', 7],
          ['宁夏回族自治区', 9],
          ['新疆维吾尔族自治区', 2],
        ],
      },
    ];

    spreedChart.on('click', function (event) {
      if (event.data) {
        var subData = drilldownData.find(function (data) {
          return data.dataGroupId === event.data.groupId;
        });
        if (!subData) {
          return;
        }
        spreedChart.setOption({
          xAxis: {
            data: subData.data.map(function (item) {
              return item[0];
            }),
          },
          series: {
            type: 'bar',
            id: 'area',
            dataGroupId: subData.dataGroupId,
            data: subData.data.map(function (item) {
              return item[1];
            }),
            universalTransition: {
              enabled: true,
              divideShape: 'clone',
            },
          },
          graphic: [
            {
              type: 'text',
              left: 60,
              top: 50,
              style: {
                text: '返回',
                textStyle: {
                  fontSize: '10',
                },
              },
              onclick: function () {
                spreedChart.setOption(option);
              },
            },
          ],
        });
      }
    });

    option && spreedChart.setOption(option);
  },
};
</script>

<style></style>
